<!-- @LESSON -->
<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Lesson 13</title>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <!-- TODO add a custom.css file -->
        <link href="../css/custom.css" rel="stylesheet">
    </head>
    <body>
        
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button title="Menu" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a title="ACME News" class="navbar-brand" href="#">ACME News</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                        <li><a href="#">Page 4</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 5 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Page 5a</a></li>
                                <li><a href="#">Page 5b</a></li>
                                <li><a href="#">Page 5c</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="lesson09a.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#loginModal"><span class="glyphicon glyphicon-log-in"></span> Sign In</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="jumbotron">
            <h1>A'hoy Matey!</h1>
            <p>This is a responsive, single-page app built with Bootstrap.</p>
            <a href="#" class="btn btn-primary">
                More Detail
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
                    <h2 title="Column 1">Column 1</h2>
                    <p>
                        <!-- TODO make our image accessible -->
                        <img class="img-responsive" src="../img/twitter-bootstrap.jpg" title="Bootstrap logo" alt="Bootstrap logo" />
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et felis dignissim, vulputate sapien at, pharetra lacus.
                        Maecenas eros risus, cursus a interdum ac, aliquam aliquam diam. Cras ac elit tincidunt, tincidunt dui ut, dictum leo.
                        Morbi porta sodales lacus, eget dapibus est lobortis in. Nullam at egestas purus, ac laoreet nunc.
                        Sed cursus diam id turpis fringilla, ut placerat elit interdum. Praesent convallis neque neque, ac sagittis nunc viverra fermentum.
                        Vivamus cursus leo nibh, id ultricies mauris rhoncus eget. 
                    </p>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
                    <h2 title="Column 2">Column 2</h2>
                    <p>
                        Etiam in sagittis magna, non laoreet lacus. Pellentesque a leo tincidunt, tempor metus at, laoreet ipsum. Nam et lobortis orci.
                        Maecenas rhoncus, arcu ac accumsan tristique, metus risus elementum orci, sit amet congue sem elit ut leo. Cras vel quam at eros posuere sodales.
                        Etiam tristique turpis feugiat, commodo lacus eu, varius nibh. Donec vel aliquam magna. 
                    </p>
                </div>

                <div class="clearfix visible-md"></div>
                
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
                    <h2 title="Column 3">Column 3</h2>
                    <p>
                        Donec egestas tellus eget orci mattis egestas. Phasellus a mauris ligula. Class aptent taciti sociosqu ad litora torquent per
                        conubia nostra, per inceptos himenaeos. Nunc id augue bibendum, mollis leo a, lacinia neque. Sed ut mattis turpis. Maecenas
                        elit metus, suscipit scelerisque augue at, vestibulum scelerisque purus. Praesent vitae enim varius lectus rutrum elementum.
                        Nunc imperdiet ut mi vel lobortis. 
                    </p>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
                    <h2 title="Column 4">Column 4</h2>
                    <p>
                        Integer consectetur nisl a porta porttitor. Integer eget mollis turpis. Etiam tempus diam vitae diam aliquam tempor. Vivamus
                        lacinia sodales elit, at malesuada arcu aliquet eget. Praesent ipsum lectus, lacinia quis tincidunt at, egestas non nisi.
                        Curabitur fermentum blandit nisl a dapibus. Donec aliquam pharetra felis sed consectetur. 
                    </p>
                </div>
            </div>
        </div>
        
        <form action="#" method="post" id="signupForm">
            <div class="modal fade" id="loginModal" tabindex="-1">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" id="loginModalLabel">Sign In</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group" id="inputUserIDFormGroup">				
                                <label class="control-label" for="inputUserID">Username</label>				
                                <input type="text" class="form-control" id="inputUserID" placeholder="Enter your username">    			
                            </div>
                            <div class="form-group" id="inputPasswordFormGroup">				
                                <label class="control-label" for="inputPassword">Password</label>				
                                <input type="password" class="form-control" id="inputPassword" placeholder="Enter your password">    			
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Login</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>
</html>
